<template>
  <div class="smsContainer">
    <el-form-item label="手机号" prop="smsIphone">
      <el-input
        maxlength="11"
        v-model="loginForm.smsIphone"
        class="captcha phone"
      ></el-input>
      <span @click="sendOk" class="captcha-svg" v-text="sendOut"></span>
    </el-form-item>
    <el-form-item label="验证码">
      <el-input v-model="loginForm.smsCode" maxlength="5"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="smsSubmit" class="btnClass"
        >战死沙场</el-button
      >
    </el-form-item>
  </div>
</template>

<script>
import * as api from "@/api/user";
//短信登入
export default {
  data() {
    return {
      loginForm: {
        smsIphone: "159508124",
        smsCode: "",
      },
      timer: null,
      sendOut: "点击发送短信",
      //声明一个属性来控制点没点按钮
      //flag:true
      flag: true,
    };
  },
  props: {
    //复用此方法
    StorageUserInfo: {
      require: true,
    },
  },
  destroyed() {
    clearInterval(this.timer);
  },
  methods: {
    //点击发送验证码
    async sendOk() {
      //flag默认为true
      //user-select:none 不让用户选中
      // if(this.flag){}
      //给个倒计时
      //倒计时开始就禁用按钮
      if (this.flag) {
        this.flag = false;
        let delay = 5;
        if (this.timer) {
          clearInterval(this.timer);
        }
        let res = await api.phoneSend(this.loginForm.smsIphone);
        //当短信发送成功调用这个
        if (res.data.state) {
          this.$message({
            type: "success",
            message: "发送成功了老铁",
          });
        } else {
          //  this.$message.error(res.data.msg)
        }
        /**
         * data: bizId: "880812073804247989^0"code: "OK"message: "OK"msg: "OK"requestId: "D933F49C-AA34-5864-A9F4-78478235AE08"state: truestatus: 200
         */
        this.timer = setInterval(() => {
          this.sendOut = `${delay}秒后重新发送`;
          delay--;
          if (delay < 0) {
            this.sendOut = "点击发送短信";
            this.flag = true;
          }
        }, 1000);
      }
    },
    //点击登入
    async smsSubmit() {
      let resd = await api.phoneLongin(this.loginForm.smsCode);
      this.StorageUserInfo(resd.data);
      console.log(resd.data);
      if (resd.data.state) {
        this.$message({
          message: "登入成功",
          type: "success",
        });
        // console.log(resd.data.state);
        //登入
        //this.$router.push
      }
    },
  },
};
</script>

<style scoped lang="less">
.captcha-svg {
  color: #888;
  line-height: 45px;
  text-decoration: underline;
  display: inline-block;
  height: 45px;
  text-align: center;
  cursor: pointer;
  border: 0;
  background: #fff;
  border-radius: 0 5px 5px 0;
  width: 115px !important;
}
.captcha {
  width: 180px !important;
  vertical-align: top;
  /deep/.el-input__inner {
    width: 100%;
    height: 45px;
    border-radius: 5px 0 0 5px;
    border: 0;
    font-size: 18px;
  }
}
.btnClass {
  background-image: url("@/assets/img/btn.jpg");
  width: 300px;
  border: 0;
  color: #efd100;
  cursor: pointer;
  //添加hover样式
  &:hover {
    color: #fff;
  }
}
</style>
